<script setup lang="ts">
const progressData = [
  {
    name: "杭州青青草公益服务中心",
    percentage: 99,
    duration: 110,
    color: "#007aff"
  },
  {
    name: "杭州青青草公益服务中心",
    percentage: 90,
    duration: 110,
    color: "#007aff"
  },
  {
    name: "杭州青青草公益服务中心",
    percentage: 89,
    duration: 110,
    color: "#007aff"
  },
  {
    name: "杭州青青草公益服务中心",
    percentage: 85,
    duration: 110,
    color: "#007aff"
  }
];
</script>

<template>
  <div
    v-for="(item, index) in progressData"
    :key="index"
    :class="['flex', 'justify-between', 'items-start', 'mt-[4px]']"
  >
    <el-progress
      :text-inside="true"
      :percentage="item.percentage"
      :stroke-width="15"
      :color="item.color"
      striped
      striped-flow
      class="w-full"
      :show-text="false"
      :duration="item.duration"
    >
    </el-progress>
    <span>
      <el-tooltip
        class="box-item"
        effect="dark"
        :content="item.name"
        placement="top"
      >
        <el-text class="cursor-pointer w-[45px] text-right" truncated>
          {{ item.percentage }}%
        </el-text>
      </el-tooltip>
    </span>
  </div>
</template>

<style lang="scss" scoped></style>
